<template>
  <div class="component-title" :style="props.propsStyle ? props.propsStyle : {}">
    <span class="title">
      {{ props.name
      }}<el-radio-group
        @change="onChange"
        v-model:value="radioValue"
        button-style="solid"
        option-type="button"
        v-if="props.radioGroup"
        :options="(props.radioGroup as any)"
        class="ml-5"
      />
    </span>

    <span v-if="props.subTitle" class="subTitle">
      {{ props.subTitle }}
    </span>
  </div>
</template>

<script setup lang="ts">
  const emit = defineEmits(['value-change']);
  //接受父组件传递过来的参数
  const props = defineProps({
    name: String,
    propsStyle: Object || undefined,
    subTitle: String,
    radioGroup: Array || undefined,
    defaultValue: Number || undefined,
  });
  const radioValue = ref(props.defaultValue);
  const onChange = (data) => {
    const value = data.target.value;
    radioValue.value = value;
    emit('value-change', value);
  };
</script>

<style scoped lang="scss">
  .component-title {
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    border-left: 4px solid #1677ff;
    margin-bottom: 12px;
    height: 22px;
    align-items: center;
    :deep(.el-radio-button-wrapper) {
      height: 28px;
      line-height: 28px;
    }
    .title {
      font-size: 16px;
    }
    .subTitle {
      font-weight: 200;
    }
  }
</style>
